<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- 父组件模板 -->
        <div id="app">
            <cpn @item-click="itemClick"></cpn>
        </div>

        <!-- 子组件模板 -->
        <template id="cpn">
            <div>
                <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>

            /**
                ## 子传父解析：
                    1. 子组件使用this.$emit('方法名'， 参数)的形式发射数据
                    2. 父组件在组件标签中使用v-on绑定在子组件里定义的方法名，等于的内容是自定义的方法
                    3. 父组件里定义的方法可以接收子组件方法里的参数
            */


            // 子组件
            const cpn = {
                template: '#cpn',
                data() {
                    return {
                        categories: [
                            {id: 'aaa', name:'热门推荐'},
                            {id: 'bbb', name:'手机数码'},
                            {id: 'ccc', name:'家用家电'},
                            {id: 'ddd', name:'电脑办公'}
                        ]
                    }
                },
                methods: {
                    btnClick(item) {
                        // alert(JSON.stringify(item))
                        //发射！
                        this.$emit('item-click', item)
                    }
                },
            }

            // 父组件
            const app = new Vue({
                el: '#app',
                components: {
                    cpn
                },
                data: {
                },
                methods: {
                    itemClick(item) {
                        console.log(JSON.stringify(item))
                    }
                }
            })
        </script>
    </body>
</html>